<template>
  <div class="layout" style="width: 100%">
    <!-- 顶部 -->
    <div class="Top">
      <!-- 公司logo -->
      <div class="logo">
        <img src="../views/imgs/logo.png" alt="" />
      </div>
      <h1 class="CorporateName">就爱科技有限公司</h1>

      <!-- 搜索框和查询按钮 -->
      <div class="input">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item class="useraa">
            <el-button
              type="text"
              @click="goToLogin"
              v-show="!this.showUsername"
              >用户登录</el-button
            >
            <!-- <el-button
              type="text"
              @click="goToLoginBack"
              v-show="!this.showUsername"
              >管理员登陆</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>

      <!-- 首页新闻排行榜 -->
      <div class="Navigation">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1" @click="goTodefault">首页</el-menu-item>
          <!-- <el-menu-item index="2" @click="goToNews">新闻</el-menu-item> -->

        </el-menu>
      </div>

      <!-- 头像 -->
      <div class="headPortrait">
        <el-col :span="12">
          <div class="demo-basic--circle1">
            <div class="block">
              <el-avatar :size="40" :src="squareUrl"></el-avatar>
            </div>
          </div>
        </el-col>

        <el-dropdown>
          <span class="el-dropdown-link" :model="formData">
            当前用户 ：{{ showUsername
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="goToChangePWD"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item @click.native="clearUser"
              >注销用户</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- 用户名及用户功能 -->
      <div class="UserdropDown"></div>
    </div>

    <!--走马灯-->
    <div>
      <el-carousel
        :interval="4000"
        type="card"
        height="400px"
        class="WalkingLantern"
      >
        <el-carousel-item v-for="item in WalkingLanterns" :key="item.index">
          <img :src="item.url" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <el-scrollbar style="height: 655px; width: 1050px">
      <!-- 渲染出来的文章 -->
      <table>
        <tr>
          <td>
            <div class="Articles">
              <el-row>
                <el-col
                  :span="8"
                  v-for="(item, id) of tableData"
                  :key="id"
                  :offset="item > 0 ? 3 : 0"
                  shadow
                >
                  <el-card
                    style="width: 70%; height: 40%"
                    shadow="hover"
                    class="CardArticles"
                  >
                    <img
                      :src="'http://news.syouq.top:5000/files/' + item.avatar"
                      class="image"
                    />
                    <div>
                      <div class="o" v-html="item.title"></div>
                      <div class="bottom clearfix">
                        <time class="time" v-html="item.createdTime"
                          >发布日期</time
                        >
                        <br />
                        <el-button
                          type="text"
                          class="button"
                          @click="handleWatch(item)"
                          >查看详情</el-button
                        >
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </td>
        </tr>
      </table>
    </el-scrollbar>

    <table>
      <tr>
        <td>
          <div class="dispalyOrder">
            <div class="Code1">
              <img src="../views/imgs/Code01.png" alt="" />
            </div>
            <div class="Code2">
              <img src="../views/imgs/Code02.png" alt="" />
            </div>
            <div class="Code3">
              <img src="../views/imgs/Code03.png" alt="" />
            </div>
          </div>
        </td>
        <td>
          <div class="foolterText">
            <p>域名备案号:</p>
            <br />
            <p>公安备案号：</p>
            <br />
            <p>Copyright © 2020-2021 就爱科技版权 所有.</p>
          </div>
        </td>
      </tr>
    </table>

    <div class="Order">
      <!-- <el-card shadow="hover">
        <span>48小时阅读排行榜</span>
        <br />
        <el-button type="text" class="button" @click="handleWatch(item)">
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
        </el-button>
      </el-card> -->
      <el-card class="aide_card">
        <div slot="header" class="clearfix">
          <span>阅读排行榜</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text"
                  >更多>></el-button -->
        </div>

        <div v-for="(item, id) of Numtable" :key="id">
          <div>
            <el-col :span="15">
              <el-button type="text" class="button" @click="handleWatch(item)">
                <div class="numreadingsTitle">
                  <font class="s">{{ item.title }} </font>
                </div>
              </el-button>
            </el-col>
          </div>
        </div>
      </el-card>
      <!--走马灯2-->
      <div class="ketou">
        <div>
          <el-carousel
            :interval="500"
            type="card"
            height="220px"
            class="WalkingLanterns"
          >
            <el-carousel-item v-for="item in WalkingLanternss" :key="item.id">
              <img :src="item.url" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- <el-card class="likesOrder" shadow="hover">
        <span>48小时点赞排行榜</span>
        <br />
        <el-button type="text" class="button" @click="handleWatch(item)">
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
          <font class="el-icon-star-off">杨倩为中国代表团夺取东京奥运首金</font>
          <br />
        </el-button>
      </el-card> -->
      <el-card class="aide_card">
        <div slot="header" class="clearfix">
          <span>点赞排行榜</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text"
                  >更多>></el-button -->
        </div>

        <div v-for="(item, id) of Liketable" :key="id">
          <el-col :span="15">
            <el-button type="text" class="button" @click="handleWatch(item)">
              <div class="likesTitle">
                <font>{{ item.title }} </font>
              </div>
            </el-button>
          </el-col>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import tox from "../views/imgs/touxiang.webp";
import {
  getList,
  addarticles,
  getById,
  deleteId,
  numReadings,
  latest,
  Likes,
} from "../api/articles";
import { getarictlesList } from "../api/articlecomments";
import Cookies from "js-cookie";
import { clearToken } from "../utils/auth";
export default {
  inject: ["reload"],
  data() {
    return {
      WalkingLanterns: [
        { url: require("@/views/imgs/1.jpg") },
        { url: require("@/views/imgs/2.png") },
        { url: require("@/views/imgs/3.png") },
        { url: require("@/views/imgs/4.png") },
      ],
      WalkingLanternss: [
        { url: require("@/views/imgs/xmt0.webp") },
        { url: require("@/views/imgs/xmt1.webp") },
        { url: require("@/views/imgs/xmt2.webp") },
        { url: require("@/views/imgs/xmt3.webp") },
        { url: require("@/views/imgs/xmt4.webp") },
        { url: require("@/views/imgs/xmt5.webp") },
        { url: require("@/views/imgs/xmt6.webp") },
        { url: require("@/views/imgs/xmt7.webp") },
        { url: require("@/views/imgs/xmt8.webp") },
      ],

      avatardata: {
        avatar: "",
      },
      Numtable: "",
      Liketable: "",
      form: {
        title: "",
        numReadings: "",
      },
      form1: {
        title: "",
        likes: "",
      },
      commentData: {
        id: "",
        comment: "",
      },
      editor: null,
      id: "",
      editorData: "",
      tableData: [],
      commentaa: [],
      article: {
        title: "",
        context: "",
      },
      Data: {
        title: "",
        context: "",
      },
      formData: {
        title: "",
        context: "",
        author: "",
        avatar: "",
      },
      dialogFormVisible: false,
      dialogVisible: false,
      imageUrl: "",
      dialogFormAvatarFullUrl: "",
      squareUrl: tox,
    };
  },
  computed: {
    uploadActionUrl() {
      let baseUrl = "http://news.syouq.top:5000/";
      let url = "files/uploadfiles";
      return baseUrl + url;
    },
    articleid() {
      var id = this.id;
      return id;
    },
    showUsername() {
      return Cookies.get("username");
    },
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.formData.avatar = URL.createObjectURL(file.raw);
      // 保存相对路径
      let prePath = res.data[0];
      // 显示使用完整路径
      let fullPath = URL.createObjectURL(file.raw);
      this.formData.avatar = prePath;
      this.dialogFormAvatarFullUrl = fullPath;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.name = "";
      this.formData.context = "";
      this.formData.author = "";
    },
    handleWatch(item) {
      this.dialogVisible = true;
      this.id = item.id;
      console.log(this.id);

      console.log(this.tableData);
      console.log(item);
      this.Data.title = item.title;
      this.Data.context = item.context;
      getarictlesList(item.id).then((res) => {
        // console.log(res.data.data);
        this.commentData = res.data.data;
        this.commentData.forEach((element) => {
          getById(element.commentId).then((res) => {
            this.commentaa.push(res.data.data);
          });
        });
      });
      this.commentaa = [];
      this.$router.push("/news?id=" + item.id);
    },
    handleClick(row) {
      console.log(row);
    },
    goToLogin() {
      this.$router.push("/login");
    },
    goToLoginBack() {
      this.$router.push("/loginBack");
    },
    goToBack() {
      this.$router.push("/adminhome");
    },
    goToNews() {
      this.$router.push("/news");
    },
    goTodefault() {
      this.$router.push("/newIndex");
    },
    goToChangePWD() {
      this.$router.push("/changePasswd");
    },

    clearUser() {
      Cookies.remove("username");
      Cookies.remove("id");
      clearToken();
      this.$message.success("注销成功");
      this.reload();
    },
    gotogongsi(){
      this.$router.push('/gongsi')
    },
    deleted(row) {
      console.log(row);
      this.currentIndex = row;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteId(row)
            .then((res) => {
              console.log(res);
              if (res.code === 1000) {
                this.tableData.splice(row.id, 1);
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.fetchData(this.article);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getEditorData() {
      this.dialogFormVisible = false;
      var data = this.editor.txt.html();
      console.log(data);
      this.formData.context = data;
      this.tableData.push(data);
      //添加到数据库并且返回数据
      console.log(this.formData);
      addarticles(this.formData).then((res) => {
        console.log(res);
        console.log();
      });
      this.fetchData(this.article);
    },
    fetchData() {
      getList(this.article)
        .then(({ data }) => {
          var res = data.data.data;
          console.log(res);
          this.tableData = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetchData(this.article);
    numReadings(this.form)
      .then(({ data }) => {
        var res = data.data.data;
        console.log(res);
        this.Numtable = res;
        console.log(this.Numtable);
      })
      .catch((err) => {
        console.log(err);
      });
    Likes(this.form1)
      .then(({ data }) => {
        var res = data.data.data;
        console.log(res);
        this.Liketable = res;
        console.log(this.Numtable);
      })
      .catch((err) => {
        console.log(err);
      });
    latest(this.avatardata)
      .then(({ data }) => {
        var res = data.data.data;
        console.log(res);
        this.avatardata = res;
        console.log(this.avatardata);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
body {
  background-color: whitesmoke;
}
/* 头部 */
.Top {
  width: 1440px;
  height: 60px;
  background-color: white;
}
/* 走马灯 */
.WalkingLantern {
  width: 1440px;
  margin-top: 3%;
}
/* 走马灯2 */
.WalkingLanterns {
  width: 328px;
  margin-top: 3%;
}
.logo {
  width: 5%;
  height: 60px;
  margin-left: 1%;
}
/* 公司名称 */
.CorporateName {
  margin-left: 6%;
  margin-top: -3%;
}
/* 按钮 */
.input {
  margin-left: 22%;
  margin-top: -5%;
}
/* 导航 */
.Navigation {
  margin-left: 25%;
  margin-top: -6.1%;
  width: 400px;
}
/* 头像 */
.headPortrait {
  margin-left: 80%;
  margin-top: -4%;
}
.el-dropdown-link {
  margin-left: 20%;
  float: left;
  margin-top: -25%;
}

.Articles {
  width: 1400px;
  background-color: whitesmoke;
  /* float: left; */
  margin-left: -7%;
}
.el-row {
  width: 70%;
  background-color: white;
  margin-left: 12%;
}

.CardArticles {
  margin-top: 3%;
  margin-left: 15%;
}
.el-col-offset-3 {
  margin-left: 0px;
}

.dispalyOrder {
  width: 1000px;
  height: 30vh;
  margin-left: 0%;
  margin-top: 5%;
}
.Code1 {
  width: 200px;
  height: 248px;
  float: left;
  margin-left: 3%;
}
.Code2 {
  width: 200px;
  height: 248px;
  float: left;
  margin-left: 3%;
}
.Code3 {
  width: 200px;
  height: 248px;
  float: left;
  margin-left: 3%;
}

.layout {
  min-width: 1400px;
}

.Order {
  width: 330px;
  height: 650px;
  background-color: whitesmoke;
  margin-left: 75%;
  margin-top: -958px;
}

.button {
  margin-left: 0px;
  font-size: 14px;
}
.w {
  margin-top: 0px;
  margin-left: -100px;
}

.el-icon-star-off {
  margin-top: 10px;
}

.likesOrder {
  margin-top: 60px;
}

/*此处是为了将原有的横向滚动条隐藏，原本的滚动条很丑*/
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.useraa {
  margin-top: 25px;
}

.ketou {
  width: 328px;
  height: 207px;
}
.demo-form-inline {
  margin-left: 500px;
}

.foolterText {
  margin-left: -90%;
}

.clearfix {
  margin-left: 60px;
}

.el-card {
  margin-top: 30px;
}

.image {
  width: 189px;
  height: 126px;
}

.o {
  width: 200px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: pre-wrap;
}


</style>